<template>
	<view class="content">
		<view><wyb-drop-down ref="building" :options="options"></wyb-drop-down></view>

		<view class="list" @click="openContent">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item-image">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
				<view>
					<view class="item-title">{{item.name}}</view>
					<view class="item-content">{{item.area.name}}/{{item.style.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';

	export default {
		data() {
			return {
				list: [],
				options: [{
						header: '区域',
						contents: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区', '浏阳市', '宁乡市', '长沙县']
					},
					{
						header: '风格',
						contents: ['恬淡田园风格', '新中式风格装修', '现代简约风格', '欧式古典风格', '地中海风格', '东南亚风格']
					},
					{
						header: '户型',
						contents: ['115m²', '120m²', '135m²', '140m²']
					}
				]
			};
		},
		components: {
			wybDropDown
		},
		onLoad() {
			uni.request({
				url: 'https://baiyi.kent.work/api/v1/system/getBuildList',
				method: 'post',
				data: {
					"page": 1,
					"limit": 10,
					"style": 0,
					"area": 0,
					"model": 0
				},
				success: res => {
					console.log(res);
					this.list = res.data.data.list
				}
			})
		},
		methods: {
			openContent() {
				uni.navigateTo({
					url: '/pages/building_content/index',
				});
			}
		}
	};
</script>

<style>

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 22rpx;
		padding: 22rpx;
	}

	.item {
		background: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.item-image {
		width: 100%;
	}

	image {
		border-radius: 12rpx 12rpx 0 0;
		display: block;
		width: 100%;

	}

	.item-title {
		font-size: 24rpx;
		margin-top: 16rpx;
		margin-left: 20rpx;
	}

	.item-content {
		font-size: 20rpx;
		color: #666666;
		margin-left: 20rpx;
		margin-bottom: 12rpx;
	}
	.content {
		padding-top: 96rpx;
	}
	
</style>